<template>
  <div class="main h-[calc(100%-29px)]">
    <div class="w-full">
      <div v-if="queryShow" class="mb-[10px] w-full search-form">
        <el-form :inline="true" :model="queryForm.data" label-width="90px">
          <el-form-item label="用户名称">
            <el-input
              v-model="queryForm.data.blurry"
              clearable
              placeholder="输入用户名称搜索"
            />
          </el-form-item>
          <el-form-item label="所属行政区">
            <el-cascader
              ref="district"
              v-model="queryForm.data.districtId"
              placeholder="请选择"
              style="width: 160px"
              clearable
              :props="disProps"
            />
          </el-form-item>
          <el-form-item label="参加市场">
            <el-select
              v-model="queryForm.data.inMarket"
              filterable
              placeholder="请选择"
              style="width: 160px"
            >
              <el-option
                v-for="item in dictList.data.inMarket"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="整体状态">
            <el-select
              v-model="queryForm.data.status"
              filterable
              placeholder="请选择"
              style="width: 160px"
            >
              <el-option
                v-for="item in dictList.data.status"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              v-model="queryForm.data.contactName"
              clearable
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item class="ml-[10px]">
            <el-button type="primary" :icon="Search" @click="search"
              >搜索</el-button
            >
            <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="w-full">
        <div class="w-full flex justify-between">
          <div class="buttons flex align-center">
            <el-button type="primary" :icon="Plus" @click="addMenu"
              >新增</el-button
            >
            <el-button
              type="success"
              :icon="Edit"
              :disabled="!(multipleSelection.length === 1)"
              @click="editSelect"
              >修改</el-button
            >
            <el-button
              type="danger"
              :icon="Delete"
              :disabled="!multipleSelection.length"
              @click="delSelect"
              >删除</el-button
            >
            <!--            <el-button type="warning" :icon="Download" @click="exportData"-->
            <!--              >导出</el-button-->
            <!--            >-->
          </div>
          <div class="settings">
            <el-button-group class="ml-4">
              <el-button
                type="primary"
                :icon="Search"
                @click="queryShow = !queryShow"
              />
              <el-button type="primary" :icon="RefreshLeft" @click="getList" />
              <el-popover placement="bottom" :width="200" trigger="click">
                <template #reference>
                  <el-button type="primary" :icon="Grid" />
                </template>
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
                <div class="group-box w-full max-h-[240px] overflow-y-auto">
                  <el-checkbox-group
                    v-model="checkedCities"
                    class="columns-show-group"
                    @change="handleCheckedCitiesChange"
                  >
                    <el-checkbox
                      v-for="item in defaultColums.data"
                      :key="item.prop"
                      :label="item.prop"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-popover>
            </el-button-group>
          </div>
        </div>
        <div class="flex">
          <div class="role w-full">
            <div v-loading="loading" class="w-full mt-[10px]">
              <el-table
                ref="multipleTableRef"
                :data="tableData.data"
                style="width: 100%"
                row-key="id"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column
                  v-for="item in colums.data"
                  :key="item.prop"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                  show-overflow-tooltip
                >
                  <template
                    v-if="
                      [
                        'sector',
                        'inMarket',
                        'status',
                        'gridVoltageLevel',
                        'substationType'
                      ].indexOf(item.prop) > -1
                    "
                    #default="scope"
                  >
                    <span>{{
                      dictFormat(
                        item.prop,
                        scope.row[item.prop],
                        dictList.data[item.prop]
                      )
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="270">
                  <template #default="scope">
                    <!--                    <el-tooltip-->
                    <!--                      class="box-item"-->
                    <!--                      effect="dark"-->
                    <!--                      content="实时数据"-->
                    <!--                      placement="top"-->
                    <!--                    >-->
                    <!--                      <el-button-->
                    <!--                        type="primary"-->
                    <!--                        size="small"-->
                    <!--                        :icon="DataLine"-->
                    <!--                        @click="pOnline(scope.row)"-->
                    <!--                      />-->
                    <!--                    </el-tooltip>-->
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="功率数据"
                      placement="top"
                    >
                      <el-button
                        type="primary"
                        size="small"
                        :icon="DataLine"
                        @click="pTrends(scope.row)"
                      />
                    </el-tooltip>
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="查看"
                      placement="top"
                    >
                      <el-button
                        type="primary"
                        size="small"
                        :icon="Document"
                        @click="lookRow(scope.row)"
                      />
                    </el-tooltip>
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="修改"
                      placement="top"
                    >
                      <el-button
                        type="primary"
                        size="small"
                        :icon="Edit"
                        @click="editRow(scope.row)"
                      />
                    </el-tooltip>
                    <el-popconfirm
                      width="200px"
                      title="确定删除本条数据吗？"
                      @confirm="delConfirm(scope.row)"
                    >
                      <template #reference>
                        <el-button type="danger" size="small" :icon="Delete" />
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="page w-full mt-[10px]">
              <el-pagination
                v-model:current-page="pageObj.data.currentPage"
                v-model:page-size="pageObj.data.pageSize"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageObj.data.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Delete,
  Download,
  Edit,
  Grid,
  Plus,
  RefreshLeft,
  Search,
  Document,
  DataLine
} from "@element-plus/icons-vue";
import {
  ElCascader,
  ElForm,
  ElMessageBox,
  ElNotification,
  ElTable
} from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { getDictData } from "@/api/system";
import { downloadFile } from "@/utils";
import {
  delVppUserList,
  exportVppUserList,
  getDistrictInfo,
  getVppUserList
} from "@/api/vppUser";
import { useRouter } from "vue-router";
const router = useRouter();
const queryShow = ref(true);
const queryForm = reactive({
  data: {
    blurry: undefined,
    enabled: undefined,
    createTime: [],
    contactName: undefined,
    inMarket: undefined,
    status: undefined,
    districtId: undefined
  }
});
const disProps = {
  lazy: true,
  label: "label",
  value: "id",
  checkStrictly: true,
  lazyLoad: (node, resolve) => {
    const { level } = node;
    if (level === 0) {
      getDistrictInfo({ pid: 0 }).then(res => {
        res.forEach(item => {
          item.leaf = !item.hasChildren;
          item.value = item.id;
        });
        resolve(res);
      });
    } else {
      getDistrictInfo({ pid: node.data.id }).then(res => {
        res.forEach(item => {
          item.leaf = !item.hasChildren;
          item.value = item.id;
        });
        resolve(res);
      });
    }
  }
};
const resetQuery = () => {
  queryForm.data = {
    blurry: undefined,
    enabled: undefined,
    createTime: [],
    contactName: undefined,
    inMarket: undefined,
    status: undefined,
    districtId: undefined
  };
};
const pTrends = row => {
  router.push({
    path: "/station/predictingTrends?id=" + row.id,
    query: {
      id: row.id
    }
  });
};
const pOnline = row => {
  router.push({
    path: "/station/vppUserOnlineData",
    query: {
      hisCode: row.hisCode ? row.hisCode : ""
    }
  });
};
const search = async () => {
  pageObj.data.currentPage = 1;
  let { content, totalElements } = await getData();
  pageObj.data.total = totalElements;
  tableData.data = content;
};
const getList = async () => {
  let { content, totalElements } = await getData();
  pageObj.data.total = totalElements;
  tableData.data = content;
};
const exportData = async () => {
  let res = await exportVppUserList({
    current: pageObj.data.currentPage - 1,
    size: pageObj.data.pageSize,
    sort: "id,desc",
    fullName: queryForm.data.blurry ? queryForm.data.blurry : undefined
  });
  downloadFile(res, "用户数据", "xlsx");
};
const handleSizeChange = () => {
  search();
};
const handleCurrentChange = async () => {
  getList();
};
const getData = () => {
  loading.value = true;
  return new Promise<any>(async (resolve, reject) => {
    let data = await getVppUserList({
      current: pageObj.data.currentPage,
      size: pageObj.data.pageSize,
      sort: "id,desc",
      name: queryForm.data.blurry ? queryForm.data.blurry : undefined,
      contactName: queryForm.data.contactName,
      inMarket: queryForm.data.inMarket,
      status: queryForm.data.status,
      districtId:
        queryForm.data.districtId && queryForm.data.districtId.length
          ? queryForm.data.districtId[queryForm.data.districtId.length - 1]
          : undefined
    });
    loading.value = false;
    resolve(data);
  });
};

const dictList = reactive({
  data: {
    sector: [],
    inMarket: [],
    status: [],
    gridVoltageLevel: [],
    substationType: []
  }
});
const init = async () => {
  const sectorData = await getDictData({
    dictName: "vpp_sector_type"
  });
  const substationNameData = await getDictData({
    dictName: "vpp_substation"
  });
  const VoltageLevel = await getDictData({
    dictName: "VoltageLevel"
  });
  const inMarketData = await getDictData({
    dictName: "vpp_market_type"
  });
  const statusData = await getDictData({
    dictName: "vpp_user_status"
  });
  dictList.data.sector = sectorData.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
  dictList.data.inMarket = inMarketData.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
  dictList.data.status = statusData.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
  dictList.data.gridVoltageLevel = VoltageLevel.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
  dictList.data.substationType = substationNameData.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
};
const dictFormat = (key, value, data) => {
  if (value) {
    let item = data.find(i => parseInt(i.value) === parseInt(value));
    if (item) {
      return item.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
};
init();
const tableData = reactive({
  data: []
});
const colums = reactive({
  data: [
    // {
    //   label: "用户全称",
    //   prop: "fullName",
    //   width: "100px"
    // },
    {
      label: "用户简称",
      prop: "name",
      width: "100px"
    },
    // {
    //   label: "用户注册地址",
    //   prop: "address",
    //   width: "140px"
    // },
    {
      label: "用户现场地址",
      prop: "siteAddress",
      width: "140px"
    },
    {
      label: "所属公司名称",
      prop: "groupName",
      width: "140px"
    },
    {
      label: "所属行政区",
      prop: "districtName",
      width: "140px"
    },
    {
      label: "占地面积(平方公里)",
      prop: "area",
      width: "160px"
    },
    // {
    //   label: "所属行业",
    //   prop: "sector",
    //   width: "100px"
    // },
    {
      label: "行业描述",
      prop: "sectorInfo",
      width: "100px"
    },
    {
      label: "上级调度名称",
      prop: "dispatchName",
      width: "140px"
    },
    {
      label: "并网电压等级",
      prop: "gridVoltageLevel",
      width: "140px"
    },
    {
      label: "并网变电站名称",
      prop: "substationName",
      width: "140px"
    },
    {
      label: "并网变电站类型",
      prop: "substationType",
      width: "140px"
    },
    {
      label: "售电公司名称",
      prop: "powerBroker",
      width: "140px"
    },
    {
      label: "用电户号",
      prop: "distributionNo",
      width: "100px"
    },
    {
      label: "政府基金",
      prop: "govFundRate",
      width: "100px"
    },
    // {
    //   label: "容量电价",
    //   prop: "capRate",
    //   width: "100px"
    // },
    // {
    //   label: "容量补偿",
    //   prop: "capRefund",
    //   width: "100px"
    // },
    // {
    //   label: "最大负荷(kW)",
    //   prop: "maxLoad",
    //   width: "120px"
    // },
    // {
    //   label: "最大出力(kW)",
    //   prop: "maxOutput",
    //   width: "120px"
    // },
    // {
    //   label: "经度",
    //   prop: "longitude",
    //   width: "120px"
    // },
    // {
    //   label: "纬度",
    //   prop: "latitude",
    //   width: "120px"
    // },
    // {
    //   label: "海拔",
    //   prop: "altitude",
    //   width: "100px"
    // },
    // {
    //   label: "围栏坐标",
    //   prop: "fenceXy",
    //   width: "100px"
    // },
    // {
    //   label: "经纬度(虚拟字段)",
    //   prop: "longitudeAndLatitude",
    //   width: "300px"
    // },
    {
      label: "参加市场",
      prop: "inMarket",
      width: "100px"
    },
    {
      label: "分成比例",
      prop: "shareRatio",
      width: "100px"
    },
    {
      label: "总利润(元)",
      prop: "totalRevenue",
      width: "120px"
    },
    {
      label: "分成利润(元)",
      prop: "shareRevenue",
      width: "120px"
    },
    {
      label: "输配电价",
      prop: "gridRate",
      width: "100px"
    },
    {
      label: "整体状态",
      prop: "status",
      width: "120px"
    },
    {
      label: "首次上线时间",
      prop: "initOnlineTime",
      width: "140px"
    },
    {
      label: "上线时间",
      prop: "onlineTime",
      width: "100px"
    },
    {
      label: "下线时间",
      prop: "offlineTime",
      width: "100px"
    },
    // {
    //   label: "总有功(kW)",
    //   prop: "totalP",
    //   width: "120px"
    // },
    // {
    //   label: "总无功(kVar)",
    //   prop: "totalQ",
    //   width: "120px"
    // },
    // {
    //   label: "总电量(度)",
    //   prop: "totalEnergy",
    //   width: "100px"
    // },
    {
      label: "储能系统总数",
      prop: "storageNum",
      width: "120px"
    },
    {
      label: "负荷控制终端总数",
      prop: "terminalNum",
      width: "160px"
    },
    {
      label: "用电设备总数",
      prop: "equipNum",
      width: "140px"
    },
    {
      label: "储能系统在线数",
      prop: "storageOnnum",
      width: "160px"
    },
    {
      label: "负荷控制终端在线数",
      prop: "terminalOnnum",
      width: "180px"
    },
    {
      label: "用电设备在线数",
      prop: "equipOnnum",
      width: "160px"
    },
    // {
    //   label: "EMS代码",
    //   prop: "emsCode",
    //   width: "100px"
    // },
    // {
    //   label: "HIS代码",
    //   prop: "hisCode",
    //   width: "100px"
    // },
    // {
    //   label: "EMS地址",
    //   prop: "emsIpadd",
    //   width: "100px"
    // },
    // {
    //   label: "HIS地址",
    //   prop: "hisIpadd",
    //   width: "100px"
    // },
    {
      label: "联系人",
      prop: "contactName",
      width: "100px"
    },
    {
      label: "联系电话",
      prop: "contactTel",
      width: "100px"
    }
    // {
    //   label: "创建人",
    //   prop: "createBy",
    //   width: "100px"
    // },
    // {
    //   label: "更新人",
    //   prop: "updateBy",
    //   width: "100px"
    // },
    // {
    //   label: "更新时间",
    //   prop: "updateTime",
    //   width: "100px"
    // },
    // {
    //   label: "创建日期",
    //   prop: "createTime",
    //   width: "200px"
    // }
  ]
});
const defaultColums = reactive({
  data: [
    // {
    //   label: "用户全称",
    //   prop: "fullName",
    //   width: "100px"
    // },
    {
      label: "用户简称",
      prop: "name",
      width: "100px"
    },
    // {
    //   label: "用户注册地址",
    //   prop: "address",
    //   width: "140px"
    // },
    {
      label: "用户现场地址",
      prop: "siteAddress",
      width: "140px"
    },
    {
      label: "所属公司名称",
      prop: "groupName",
      width: "140px"
    },
    {
      label: "所属行政区",
      prop: "districtName",
      width: "140px"
    },
    {
      label: "占地面积(平方公里)",
      prop: "area",
      width: "160px"
    },
    // {
    //   label: "所属行业",
    //   prop: "sector",
    //   width: "100px"
    // },
    {
      label: "行业描述",
      prop: "sectorInfo",
      width: "100px"
    },
    {
      label: "上级调度名称",
      prop: "dispatchName",
      width: "140px"
    },
    {
      label: "并网电压等级",
      prop: "gridVoltageLevel",
      width: "140px"
    },
    {
      label: "并网变电站名称",
      prop: "substationName",
      width: "140px"
    },
    {
      label: "并网变电站类型",
      prop: "substationType",
      width: "140px"
    },
    {
      label: "售电公司名称",
      prop: "powerBroker",
      width: "140px"
    },
    {
      label: "用电户号",
      prop: "distributionNo",
      width: "100px"
    },
    {
      label: "政府基金",
      prop: "govFundRate",
      width: "100px"
    },
    // {
    //   label: "容量电价",
    //   prop: "capRate",
    //   width: "100px"
    // },
    // {
    //   label: "容量补偿",
    //   prop: "capRefund",
    //   width: "100px"
    // },
    // {
    //   label: "最大负荷(kW)",
    //   prop: "maxLoad",
    //   width: "120px"
    // },
    // {
    //   label: "最大出力(kW)",
    //   prop: "maxOutput",
    //   width: "120px"
    // },
    // {
    //   label: "经度",
    //   prop: "longitude",
    //   width: "120px"
    // },
    // {
    //   label: "纬度",
    //   prop: "latitude",
    //   width: "120px"
    // },
    // {
    //   label: "海拔",
    //   prop: "altitude",
    //   width: "100px"
    // },
    // {
    //   label: "围栏坐标",
    //   prop: "fenceXy",
    //   width: "100px"
    // },
    // {
    //   label: "经纬度(虚拟字段)",
    //   prop: "longitudeAndLatitude",
    //   width: "300px"
    // },
    {
      label: "参加市场",
      prop: "inMarket",
      width: "100px"
    },
    {
      label: "分成比例",
      prop: "shareRatio",
      width: "100px"
    },
    {
      label: "总利润(元)",
      prop: "totalRevenue",
      width: "120px"
    },
    {
      label: "分成利润(元)",
      prop: "shareRevenue",
      width: "120px"
    },
    {
      label: "输配电价",
      prop: "gridRate",
      width: "100px"
    },
    {
      label: "整体状态",
      prop: "status",
      width: "120px"
    },
    {
      label: "首次上线时间",
      prop: "initOnlineTime",
      width: "140px"
    },
    {
      label: "上线时间",
      prop: "onlineTime",
      width: "100px"
    },
    {
      label: "下线时间",
      prop: "offlineTime",
      width: "100px"
    },
    // {
    //   label: "总有功(kW)",
    //   prop: "totalP",
    //   width: "120px"
    // },
    // {
    //   label: "总无功(kVar)",
    //   prop: "totalQ",
    //   width: "120px"
    // },
    // {
    //   label: "总电量(度)",
    //   prop: "totalEnergy",
    //   width: "100px"
    // },
    {
      label: "储能系统总数",
      prop: "storageNum",
      width: "120px"
    },
    {
      label: "负荷控制终端总数",
      prop: "terminalNum",
      width: "160px"
    },
    {
      label: "用电设备总数",
      prop: "equipNum",
      width: "140px"
    },
    {
      label: "储能系统在线数",
      prop: "storageOnnum",
      width: "160px"
    },
    {
      label: "负荷控制终端在线数",
      prop: "terminalOnnum",
      width: "180px"
    },
    {
      label: "用电设备在线数",
      prop: "equipOnnum",
      width: "160px"
    },
    // {
    //   label: "EMS代码",
    //   prop: "emsCode",
    //   width: "100px"
    // },
    // {
    //   label: "HIS代码",
    //   prop: "hisCode",
    //   width: "100px"
    // },
    // {
    //   label: "EMS地址",
    //   prop: "emsIpadd",
    //   width: "100px"
    // },
    // {
    //   label: "HIS地址",
    //   prop: "hisIpadd",
    //   width: "100px"
    // },
    {
      label: "联系人",
      prop: "contactName",
      width: "100px"
    },
    {
      label: "联系电话",
      prop: "contactTel",
      width: "100px"
    }
    // {
    //   label: "创建人",
    //   prop: "createBy",
    //   width: "100px"
    // },
    // {
    //   label: "更新人",
    //   prop: "updateBy",
    //   width: "100px"
    // },
    // {
    //   label: "更新时间",
    //   prop: "updateTime",
    //   width: "100px"
    // },
    // {
    //   label: "创建日期",
    //   prop: "createTime",
    //   width: "200px"
    // }
  ]
});
const loading = ref(false);
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref([]);
const checkAll = ref(true);
const isIndeterminate = ref(false);
const checkedCities = ref([]);

const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? defaultColums.data.map(item => item.prop) : [];
  isIndeterminate.value = false;
  if (checkedCities.value.length) {
    colums.data = defaultColums.data;
  } else {
    colums.data = [];
  }
};
const pageObj = reactive({
  data: {
    currentPage: 1,
    pageSize: 10,
    total: 0
  }
});
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === defaultColums.data.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < defaultColums.data.length;
  let cols = [];
  defaultColums.data.forEach(i => {
    if (value.indexOf(i.prop) > -1) {
      cols.push(i);
    }
  });
  colums.data = cols;
};
onMounted(() => {
  search();
  checkedCities.value = colums.data.map(item => item.prop);
});
const props = {
  label: "label",
  hasChildren: "hasChildren",
  children: "children",
  isLeaf: "leaf"
};
const form = reactive({
  data: {
    id: null,
    name: null,
    fullName: null,
    address: null,
    siteAddress: null,
    groupName: null,
    districtId: null,
    area: null,
    sector: null,
    sectorInfo: null,
    dispatchName: null,
    gridVoltageLevel: null,
    substationName: null,
    powerBroker: null,
    distributionNo: null,
    govFundRate: null,
    capRate: null,
    capRefund: null,
    maxLoad: null,
    maxOutput: null,
    longitude: null,
    latitude: null,
    altitude: null,
    fenceXy: null,
    longitudeAndLatitude: null,
    inMarket: null,
    shareRatio: null,
    totalRevenue: null,
    shareRevenue: null,
    status: null,
    initOnlineTime: null,
    onlineTime: null,
    offlineTime: null,
    totalP: null,
    totalQ: null,
    totalEnergy: null,
    storageNum: null,
    terminalNum: null,
    equipNum: null,
    storageOnnum: null,
    terminalOnnum: null,
    equipOnnum: null,
    emsCode: null,
    hisCode: null,
    emsIpadd: null,
    hisIpadd: null,
    contactName: null,
    contactTel: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    gridRate: null
  },
  rules: {
    name: [{ required: true, message: "用户名称不能为空", trigger: "blur" }],
    fullName: [
      { required: true, message: "用户全称不能为空", trigger: "blur" }
    ],
    dispatchName: [
      { required: true, message: "上级调度名称不能为空", trigger: "blur" }
    ],
    gridVoltageLevel: [
      { required: true, message: "并网电压等级不能为空", trigger: "blur" }
    ],
    initOnlineTime: [
      { required: true, message: "首次上线时间不能为空", trigger: "blur" }
    ],
    onlineTime: [
      { required: true, message: "上线时间不能为空", trigger: "blur" }
    ],
    offlineTime: [
      { required: true, message: "下线时间不能为空", trigger: "blur" }
    ],
    contactName: [
      { required: true, message: "联系人不能为空", trigger: "blur" }
    ],
    contactTel: [
      { required: true, message: "联系电话不能为空", trigger: "blur" }
    ]
  }
});
const addMenu = () => {
  router.push(`/station/vpp_user/handle/add/null`);
};
const lookRow = row => {
  router.push(`/station/vpp_user/handle/look/${row.id}`);
};
const handleSelectionChange = val => {
  multipleSelection.value = val;
};
const editRow = async row => {
  router.push(`/station/vpp_user/handle/edit/${row.id}`);
};

const delSelect = () => {
  if (multipleSelection.value.length) {
    ElMessageBox.confirm(
      `确认删除选中的${multipleSelection.value.length}条数据?`,
      "系统提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        dangerouslyUseHTMLString: true,
        draggable: true
      }
    ).then(async () => {
      await delVppUserList(multipleSelection.value.map(i => i.id));
      ElNotification({
        title: "系统提示",
        message: "删除成功",
        type: "success"
      });
      search();
    });
  }
};
const editSelect = () => {
  if (multipleSelection.value.length === 1) {
    editRow(multipleSelection.value[0]);
  }
};
const delConfirm = async row => {
  await delVppUserList([row.id]);
  ElNotification({
    title: "系统提示",
    message: "删除成功",
    type: "success"
  });
  search();
};
</script>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-button:focus-visible) {
  outline: none;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-right: 4px;
    margin-bottom: 0;
  }
}
</style>
